/*
* 用户中心
* @Author: yudong
* @Date: 2018-04-04 16:49:50
 * @Last Modified by: ljb
 * @Last Modified time: 2019-05-17 09:53:36
*/
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
  @import '~src/assets/css/common.less';

  .user-center {
    // background: #f3f3f3;

    .space {
      height: 22 *@rem-per-px;
      // background: #f3f3f3;
    }

    .banner {
      color: #fff;
      width: 710 *@rem-per-px;
      height: 220 *@rem-per-px;
      margin: 22 *@rem-per-px auto;
      background-size: 100%;
      background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/lucky-money/activity_card.png');
    }

    .banner__title {
      font-size: 40*@rem-per-px;
      padding-top: 40*@rem-per-px;
      margin-left: 30*@rem-per-px;
    }

    .banner__desc {
      font-size: 26*@rem-per-px;
      margin-top: 20*@rem-per-px;
      margin-left: 30*@rem-per-px;
      line-height: 1.3;
    }

    .modal__lang-menu {
      position: absolute;top: 0;left: 0;z-index: 1;
      height: 100%;width: 100%;
      background-color: #fff;

      .lang-menu__content {
        position: absolute;top: 120*@rem-per-px;left: 0;right: 0;
        width: 60%;
        margin: auto;
        text-align: center;

        .lang-menu__title {
          visibility: hidden;
          font-size: 35*@rem-per-px;
          margin-bottom: 55*@rem-per-px;
        }
        .lang-menu__item {
          color: white;
          margin: auto;
          width: 80%;
          font-size: 40*@rem-per-px;
          margin-top: 30*@rem-per-px;
          border: 1px solid #666;
          border-radius: 1rem;
          background-color: #666;
          padding-top: 16*@rem-per-px;
          padding-bottom: 16*@rem-per-px;
        }
      }

    }

    .user-info {
      position: relative;
      width: 100%;
      height: 420*@rem-per-px;
      background-image: url('~src/assets/media/img/2.3.9/newbg.png');
      background-repeat: no-repeat;
      background-size: cover;
      /*用户头像和名字*/

      .img-and-name {
        position: absolute;
        top: 74*@rem-per-px;
        right: 0;
        left: 0;
        width: 100%;
        margin: 0 auto;
        text-align: center;

        .user-img {
          position: relative;
          width: 176*@rem-per-px;
          height: 176*@rem-per-px;
          margin: 0 auto;
          border-radius: 50%;
          overflow: hidden;
          // background-color: transparent;
          img {
            width: 100%;

            &.default-user {
              width: 50%;
            }
          }
        }

        .user-name {
          margin-top: 28*@rem-per-px;
          font-size: 34*@rem-per-px;
          color: @main-background;
          text-align: center;
          font-weight: bold;
        }
      }

      /*用户头像和名字 END*/
      /*切换语言*/

      .change-lang {
        position: absolute;
        right: .5rem;
        top: .5rem;
        width: .8rem;
        height: .8rem;
        line-height: .8rem;
        background-color: #ffffff;
        border-radius: 50%;
        text-align: center;
        transition: all .3s ease 0s;
        color: #333333;

        &.CN {
          background-color: #ffffff;
        }

        &.EN {
          background-color: #ffffff;
        }
      }

      /*切换语言 END*/
      .avatar {
        & > img {
          width: 100%;
        }
      }
    }
  }

  .fade-enter-active {
    transition: opacity 400ms ease-out 20ms;
  }
  .fade-leave-active {
    transition: opacity 300ms ease-out 0ms;
  }
  .opacity-9 {
    opacity: 0.9;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
</style>
<template>
	<div class="user-center">
		<div class="user-info">
			<div class="img-and-name">
				<div class="user-img">
					<img
						v-if="getUserInfo.headimgurl"
						:src="getUserInfo.headimgurl"
						alt="">
					<img
						v-else
						:src="defaultAvatar"
						class="avatar">
				</div>
				<p class="user-name">
					{{ getUserInfo.nickname|| getUserInfo.name || $t('home.nameless') }}
				</p>
			</div>
			<div
				:class="$t('lang')"
				class="change-lang"
				@click="toggleLangMenu">
				{{ $t('lang') }}
			</div>

			<!-- BEGIN:退出 -->
			<!-- <div class="logout">
      <img
        :src="logout_icon"
        alt="log-ouot">
    </div> -->
			<!-- END:退出 -->

		</div>
		<line-cell
			v-for="(item,index) in lines"
			:icon="item.icon"
			:title="item.title"
			:name="item.className"
			:key="index"
			:class="item.className"
			@click.native="routerJump(item.route)" />
		<div class="space" />

		<!-- 特定期间活动 -->
		<!-- <line-cell
    :class="activity.className"
    :name="activity.className"
    :icon="activity.icon"
    :title="activity.title"
    :arrow="activity.arrow"/> -->

		<!-- <div
    class="banner lucky-money"
    @click="jumpToActivity">
    <h3 class="banner__title">测肤领红包</h3>
    <p class="banner__desc">用魔妆镜免费测肤,<br>领1-10元现金红包!</p>
  </div> -->

		<!-- 语言菜单 -->
		<transition name="fade">
			<div
				v-if="lang_menu_visible"
				class="modal__lang-menu opacity-9"
				@click="toggleLangMenu">
				<div class="lang-menu__content">
					<h2 class="lang-menu__title">切换语言</h2>
					<ul class="lang-menu__list">
						<li
							class="lang-menu__item"
							@click="changeLang('zh-CN')">简体中文</li>
						<li
							class="lang-menu__item"
							@click="changeLang('zh-HK')">繁體中文</li>
						<li
							class="lang-menu__item"
							@click="changeLang('en')">English</li>
					</ul>
				</div>
			</div>
		</transition>

	</div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import lineCell from 'src/views/component/line';
import collection_icon from 'src/assets/media/img/user/icon_Collection';
import info_icon from 'src/assets/media/img/user/icon_info';
import activity_icon from 'src/assets/media/img/user/huodong_icon';
import default_user_icon from 'src/assets/media/img/user/icon_mo';
import report_icon from 'src/assets/media/img/user/icon_recommend';
import card_icon from 'src/assets/media/img/user/card_icon';
import male_user_avatar from 'src/assets/media/img/user/icon_nan';
import female_user_avatar from 'src/assets/media/img/user/icon_nv';
// import logout_icon from 'src/assets/media/img/user/logout_l';
import { isInWebApp } from 'src/utils/helper';
import qs from 'qs';

const MIRROR_AUTHORIZER_ID = 4;
export default {
	name: 'UserCenter',
	components: {
		lineCell,
	},
	data() {
		return {
			isInWebApp: isInWebApp(),
			is_china: false,
			lang_menu_visible: false,
			lines: [
				{
					icon: info_icon,
					title: this.$t('home.person_info'),
					route: '/information',
					className: 'info',
				},
				{
					icon: report_icon,
					title: this.$t('home.skin_test_data'),
					route: '/report',
					className: 'skin-test',
				},
				{
					icon: collection_icon,
					title: this.$t('home.collection'),
					route: '/collection',
					className: 'collection',
				},
				{
					icon: card_icon,
					title: this.$t('home.card_coupon'),
					route: '/card',
					className: 'card',
				},
			],

			activity: {
				icon: activity_icon,
				title: this.$t('home.activity'),
				route: '/collection',
				className: 'activity',
				arrow: false,
			},

			default_user: default_user_icon,

			// logout_icon,
		};
	},
	computed: {
		...mapGetters('userInfo', [
			'getUserInfo',
		]),

		/**
     * 头像
     */
		defaultAvatar() {
			if (Number(this.getUserInfo.sex) === 2) {
				return female_user_avatar;
			}
			return male_user_avatar;
		},
	},
	mounted() {
		if (this.$t('lang') === 'CN') {
			this.is_china = true;
		} else {
			this.is_china = false;
		}
	},
	methods: {
		...mapActions('lang', [
			'changeWechatUserLang',
		]),
		/**
     *  转跳活动
     */
		jumpToActivity() {
			if (this.isMirrorUser() || this.hasAlipayAccount()) { // 魔妆镜用户 或者有阿里账户
				this.$router.push({ path: '/lucky-money-user-records' });
				return;
			}
			this.$router.push({ path: '/lucky-money-bind-account' });
		},

		/**
     *  判断是当前用户是否在使用魔妆镜公众号
     * @return {Boolean}}
     */
		isMirrorUser() {
			const { authorizer_id } = this.getUserInfo;
			return authorizer_id === MIRROR_AUTHORIZER_ID;
		},

		/**
     *  判断是当前用户是否在使用魔妆镜公众号
     * @return {Boolean}}
     */
		hasAlipayAccount() {
			const { ali_account } = this.getUserInfo;
			return !!ali_account;
		},

		/**
     * 路由跳转
     * @param  {string} path {路由路径}
     * @return {undefined}
     */
		routerJump(path) {
			if (!path) return;

			this.$router.push({
				path,
			});
		},

		/**
     * 切换多语言
     * @return {undefined}
     */
		changeLang(lang) {
			this.is_china = !this.is_china; // 增加多语言后，这个变量应该没有什么用了

			const param = {
				id: this.getUserInfo.id,
				lang,
			};

			const search = window.location.search.replace(/^\??/, ''); // 如果有 ? 开头就移除?
			const query_info = qs.parse(search);

			this.changeWechatUserLang(param)
				.then(() => {
					query_info.lang = param.lang;
					window.location.href = `${window.location.pathname}?${qs.stringify(query_info)}${window.location.hash}`;
				});
		},

		toggleLangMenu() {
			this.lang_menu_visible = !this.lang_menu_visible;
		},
	},
};
</script>
